<template>
  <div>
    <el-popover placement="bottom-end" trigger="click">
      <template slot="reference">
        <slot name="reference">
          <el-button type="primary" icon="el-icon-s-grid">筛选</el-button>
        </slot>
      </template>

      <div class="d-flex-col">
        <el-checkbox
          style="padding-bottom: 10px; margin-right: 0"
          v-model="allColumnsSelected"
          :indeterminate="allColumnsSelectedIndeterminate"
          @change="handleCheckAllChange"
          :key="key"
        >
          全选
        </el-checkbox>
        <div class="d-flex-col" ref="checkbox">
          <el-checkbox
            style="padding-bottom: 10px; margin-right: 0"
            v-for="item in columns"
            :key="item.label"
            :disabled="item.disabled"
            v-model="item.visible"
            @change="handleCheckedTableColumnsChange(item)"
          >
            {{ item.label }}
          </el-checkbox>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import Sortable from "sortablejs";
export default {
  name: "column-filter",
  props: {
    sortable: {
      type: Boolean,
      default: true
    },
    value: {}
  },
  watch: {
    value: {
      handler(val) {
        this.columns = val;
      },
      deep: true,
      immediate: true
    },
    columns: {
      handler(val) {
        this.$emit("input", val);
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    if (this.sortable) {
      this.rowDrop();
    }
  },

  data() {
    return {
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
      columns: [],
      key: true
    };
  },
  methods: {
    rowDrop() {
      const label = this.$refs.checkbox;
      const _this = this;
      Sortable.create(label, {
        onUpdate({ newIndex, oldIndex }) {
          const obj = _this.columns[oldIndex];
          _this.columns.splice(oldIndex, 1);
          _this.columns.splice(newIndex, 0, obj);
          // console.log(_this.columns, "this.columns");
        }
      });
    },
    handleCheckAllChange(val) {
      if (val === false) {
        this.allColumnsSelected = true;
        return;
      }
      for (const key in this.columns) {
        if (!this.columns[key].disabled) {
          this.columns[key].visible = val;
        }
      }
      this.allColumnsSelected = val;
      this.allColumnsSelectedIndeterminate = false;

      this.key = !this.key;
    },
    handleCheckedTableColumnsChange(item) {
      let totalCount = 0;
      let selectedCount = 0;
      for (const key in this.columns) {
        ++totalCount;
        selectedCount += this.columns[key].visible ? 1 : 0;
      }
      //   if (selectedCount === 0) {
      //     this.$message.error("至少选择一列");
      //     this.$nextTick(function() {
      //       item.visible = true;
      //     });
      //     return;
      //   }
      this.allColumnsSelected = selectedCount === totalCount;
      this.allColumnsSelectedIndeterminate =
        selectedCount !== totalCount && selectedCount !== 0;
    },
    getColumns() {
      const newColumns = [];
      const columns = JSON.parse(JSON.stringify(this.columns));
      columns.map(item => {
        if (item.visible) {
          Reflect.deleteProperty(item, "visible");
          Reflect.deleteProperty(item, "disabled");
          newColumns.push(item);
        }
      });
      return newColumns;
    }
  }
};
</script>

<style lang="scss" scoped>
.d-flex-col {
  display: flex;
  flex-direction: column;
}
</style>
